import { Dialog } from 'vant'; import { Dialog } from 'vant'; import { Dialog } from
'vant';
<template>
  <div class="body">
    <!-- 用户标头 -->
    <div class="userTitle">
      <img src="https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png" />
      <div class="left">
        <div class="module">
          <div class="portrait">
            <img :src="headImg" alt="" />
          </div>
          <div class="user">
            <text
              >用户<span>{{ name }}</span></text
            ><br />
            <span>普通用户</span>
          </div>
        </div>
      </div>
      <div class="right"></div>
      <!-- <div></div> -->
    </div>

    <!-- 我的资产 -->
    <div class="m-MyAsset">
      <p class="myassets">我的资产</p>
      <div class="m-MyAssetList">
        <div class="m-MyAssetItem">
          <span>￥0</span>
          <p>余额</p>
        </div>
        <div class="m-MyAssetItem">
          <span>￥0</span>
          <p>余额</p>
        </div>
        <div class="m-MyAssetItem">
          <span>￥0</span>
          <p>余额</p>
        </div>
        <div class="m-MyAssetItem">
          <span>￥0</span>
          <p>余额</p>
        </div>
        <div class="m-MyAssetItem">
          <span>￥0</span>
          <p>余额</p>
        </div>
      </div>
    </div>

    <!-- 广告 -->
    <div class="advertisement">
      <img
        src="https://yanxuan.nosdn.127.net/static-union/1667223545ee4d73.jpeg?type=webp&amp;imageView&amp;thumbnail=800x0&amp;quality=75"
        alt=""
      />
    </div>

    <!-- userTable -->
    <div class="userTable">
      <van-grid :column-num="3">
        <van-grid-item icon="orders-o" text="我的订单" />
        <van-grid-item icon="manager-o" text="账号管理" />
        <van-grid-item icon="phone-circle-o" text="我的手机号" />
        <van-grid-item icon="calendar-o" text="周六一起拼" />
        <van-grid-item icon="balance-list-o" text="售后服务" />
        <van-grid-item icon="cash-back-record" text="邀请返利" />
        <van-grid-item icon="bag-o" text="优先购" />
        <van-grid-item icon="cash-o" text="积分中心" />
        <van-grid-item icon="diamond-o" text="会员俱乐部" />
        <van-grid-item icon="location-o" text="地址管理" />
        <van-grid-item icon="certificate" text="支付安全" />
        <van-grid-item icon="service-o" text="帮助与客服" />
        <van-grid-item icon="records" text="意见反馈" />
        <van-grid-item icon="fire-o" text="我的竞拍" />
      </van-grid>
    </div>

    <!-- 退出登录 -->
    <div class="LogOut">
      <div class="go" @click="goLigin">退出登录</div>
    </div>

    <TabbarServe></TabbarServe>
  </div>
</template>

<script lang="ts">

export default {
  name: "User",
};
</script>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { Dialog } from "vant";
import { userInfoStore } from "@/store/userInfo";
import pinia from "@/store";
// const userName = localStorage.getItem('phone')
const useuserInfoStore = userInfoStore(pinia);
const name = useuserInfoStore.name;
const headImg = useuserInfoStore.headImg;
const router = useRouter();
const goLigin = () => {
  Dialog.confirm({
    message: "您确定要退出登录吗？",
  })
    .then(() => {
      // router.push("/Home");
      useuserInfoStore.logoutlogin();
      router.push("/");
      localStorage.removeItem("token");
      localStorage.removeItem("phone");
      localStorage.removeItem("password");
    })
    .catch(() => {
      // on cancel
    });
};
</script>

<style lang="less" scoped>
.body {
  height: 100%;
  background-color: #eeeeee;
  .userTitle {
    width: 375px;
    height: 135px;
    position: relative;
    img {
      width: 375px;
      height: 135px;
    }
    .left {
      width: 242px;
      height: 135px;
      // background-color: yellow;
      position: absolute;
      top: 0;
      left: 20px;
      .module {
        width: 242px;
        height: 135px;
        display: flex;
        align-items: center;
        .portrait {
          width: 71px;
          height: 71px;
          img {
            width: 71px;
            height: 71px;
            border-radius: 50px;
          }
        }
        .user {
          margin-left: 15px;
          height: 71px;
          padding-top: 10px;
          color: #fff;
          text {
            font-size: 18px;
            font-weight: bold;
          }
          span {
            font-size: 15px;
          }
        }
      }
    }
  }
  // 我的资产
  .m-MyAsset {
    width: 375px;
    height: 130px;
    background-color: #fff;
    margin-bottom: 10px;
    .myassets {
      width: 360px;
      height: 52px;
      font-size: 15px;
      line-height: 52px;
      margin: 0 0 0 15px;
      border-bottom: 2px solid #e5e5e5;
      // van-grid-item {
      //   // margin-top: ;
      // }
    }
    .m-MyAssetList {
      height: 70px;
      display: flex;
      .m-MyAssetItem {
        margin-top: 15px;
        font-size: 13px;
        width: 80px;
        text-align: center;
        span {
          font-weight: bold;
          font-size: 15px;
        }
        p {
          margin-top: 5px;
        }
      }
    }
  }
  // 广告
  .advertisement {
    width: 375px;
    height: 69px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 345px;
      height: 48px;
    }
  }
  .userTable {
    width: 376px;
    height: 430px;
    background-color: #fff;
  }
  .LogOut {
    width: 375px;
    height: 48px;
    background-color: #fff;
    margin: 15px 0 60px 0;
    .go {
      font-size: 16px;
      text-align: center;
      line-height: 48px;
    }
  }
}
</style>
